@charset "UTF-8";
// 全局设置
// 页面宽度范围
%width-range {
    max-width: 540px;
    min-width: 320px;
}

// 前缀
$prefix : 'new' !default;
// 主色
$main-color : #0972f2 !default;
// 红色
$color-red : #f35c68 !default;
// 橙色
$color-orange : #ffa42f !default;
// 绿色
$color-green : #09ba68 !default;
// 浅灰背景色
$color-lightgrey : #F4F6FA !default;
// 重置根目录
html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
}

// rem 单位换算rem(42)
$vm_fontsize: 75;
// 定为 75px 只是方便运算，750px:75px、640:64px、1080px:108px，如此类推
@function rem($px) {
    @return ($px / $vm_fontsize) * 1rem / 2;
}

// 根元素大小使用 vw 单位
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;
    // 同时，通过 Media Queries 限制根元素最大最小值
    // @media screen and (max-width: 320px) {
    //   // font-size: 64px !important;
    // }
    // @media screen and (min-width: 540px) {
    //   font-size: 108px !important;
    // }
    // 背景色
    // background-color: #222;
}

body {
    box-sizing: border-box;
    background-color: #FFF;
    color: #333;
    // body 也增加最大最小宽度限制，避免默认 100% 宽度的 block 元素跟随 body 而过大过小
    // @extend %width-range;
}

// 雪碧图尺寸
$sprites-bgsize: rem(300) rem(600) !default;